<template>
    <div class="thermometermanwarry">
        <div class="thermometer">
            <div class="thermometer_header">
                <div>
                    <el-form :inline="true" :model="queryList" class="demo-form-inline">
                        <el-form-item label="温度计厂商">
                            <el-select v-model="queryList.firm_id" placeholder="请选择" @change="changedDate">
                                <el-option v-for="item in Generate_vendor" :key="item.key" :label="item.value"
                                    :value="item.key">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="厂商别名">
                            <el-input v-model="queryList.firm_alias" placeholder="厂商别名"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="queryListData()">查询</el-button>
                            <el-button type="primary" @click="replacement()">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div style="margin: 0px 0px 10px 0px;">
                    <el-button type="primary" @click="found">创建</el-button>
                    <el-button type="primary" @click="deletedata">删除</el-button>
                </div>
            </div>
            <div class="thermometer_content">
                <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="firm_name" label="温度计厂商" width="100"> </el-table-column>
                    <el-table-column prop="firm_alias" label="温度计别名" width="120">
                    </el-table-column>
                    <el-table-column prop="get_type_name" label="数据获取方式" width="120">
                    </el-table-column>
                    <el-table-column prop="collect_cycle" label="采集周期(分钟)"  width="120"> </el-table-column>
                    <el-table-column prop="enable_name" label="是否启用" width="120"  >
                    </el-table-column>
                    <el-table-column prop="url" label="拉取或推送地址">
                    </el-table-column >
                    <el-table-column label="操作 " fixed="right">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="details
                            (scope.row,1)" type="text" size="small">
                                详情
                            </el-button>
                            <el-button @click.native.prevent="details
                            (scope.row,2)" type="text" size="small">
                                修改
                            </el-button>
                        </template>

                    </el-table-column>
                </el-table>
            </div>
            <div class="thermometer_footer">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage4" :page-sizes="[10, 20, 30, 40]" :page-size="queryList.page_size"
                    layout="total, sizes, prev, pager, next, jumper" :total="Alltotal">
                </el-pagination>
            </div>
            <div class="popUpwindows">
                <el-drawer :title="titlename" :visible.sync="drawer" direction="rtl" :before-close="closetabe"
                    size="50%">
                    <div style="background:#F0F2F5; ;">
                        <div style="padding: 10px 0px 0px 0px;">
                            <el-form :inline="true" class="demo-form-inline" label-width="120px" :model="ruleForm"
                                :rules="rules" ref="ruleForm" :disabled="disableddata" label-position="top">
                                <div>
                                    <el-row :gutter="20"
                                        style="padding: 10px; background: #FFFFFF; margin: 0px 10px 10px 10px ;border-radius:5px">
                                        <el-col :span="8">

                                            <el-form-item label="温度计厂家" prop="firm_id">
                                                <el-select v-model="ruleForm.firm_id" placeholder="请选择"
                                                    @change="changedDate">
                                                    <el-option v-for="item in Generate_vendor" :key="item.key"
                                                        :label="item.value+''" :value="item.key+''">
                                                    </el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="厂商别名" prop="firm_alias">
                                                <el-input placeholder="厂商别名" v-model="ruleForm.firm_alias"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="采集周期(分钟)" prop="collect_cycle">
                                                <el-input placeholder="采集周期(分钟)" v-model.number="ruleForm.collect_cycle
                                                " oninput="value=value.replace(/[^0-9]/g,'')"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="数据获取方式" prop="get_type">
                                                <el-select v-model="ruleForm.get_type" placeholder="请选择"
                                                    @change="get_typeChange" :disabled="disabledtype" >
                                                    <el-option key="0" label="拉取" value="0">
                                                    </el-option>
                                                    <el-option key="1" label="被动接收" value="1">
                                                    </el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="16">
                                            <el-form-item label="拉取或推送地址" prop="url">
                                                <el-input placeholder="拉取或推送地址" v-model="ruleForm.url
                                                " style="width: 240%;" :disabled="disabledtrue"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="app_id" prop="app_id">
                                                <el-input placeholder="app_id" v-model="ruleForm.app_id"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="密钥" prop="secret_key">
                                                <el-input placeholder="密钥" v-model="ruleForm.secret_key"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="账号" prop="account">
                                                <el-input placeholder="账号" v-model="ruleForm.account"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="密码" prop="password">
                                                <el-input placeholder="密码" v-model="ruleForm.password"></el-input>
                                            </el-form-item>
                                        </el-col>

                                        <el-col :span="8">
                                            <el-form-item label="启用" prop="is_enable

                                            ">
                                                <el-switch v-model="ruleForm.is_enable" active-color="#13ce66"
                                                    inactive-color="#ff4949">
                                                </el-switch>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </div>

                            </el-form>
                        </div>
                    </div>

                    <div style="display: flex;  justify-content:center">
                        <el-button @click="closetabe">取消</el-button>
                        <el-button type="primary" @click="confirm('ruleForm')">确定</el-button>
                    </div>
                </el-drawer>
            </div>
        </div>
    </div>
</template>
<script>
    import { Firmoptions, firm_Auth_create, firm_Auth_List, firm_Auth_delete, firm_Auth_detail, firm_Auth_update } from "@/api/information";
    export default {
        data() {
            return {
                queryList: {
                    firm_id: "", //温度厂商id
                    firm_alias: "", //厂商别名
                    page: 1,
                    page_size: 10
                },
                tableData: [],
                currentPage4: 1,
                drawer: false,//打开弹窗
                ruleForm: {
                    id:"",
                    firm_alias: "", //厂商别名
                    app_id: "", //appid和secret_key配合使用
                    secret_key: "", //appid和secret_key配合使用
                    account: "", //与password配合使用
                    password: "", //与account配合使用
                    collect_cycle: "1", //采集周期，单位分钟
                    url: "", //拉取或推送的url
                    get_type: "0", //数据获取方式: 0拉取; 1被动接收
                    is_enable: true, //0启用，1禁用
                    firm_id: "", //温度厂商id
                },
                rules: {
                    firm_id: [{ required: true, message: "请填写温度计厂家", trigger: "blur" }],
                    firm_alias: [
                        { required: true, message: "请输入厂商别名", trigger: "blur" },
                    ],
                    collect_cycle: [
                        { required: true, message: "请输入采集周期(单位分钟)", trigger: "blur" },
                    ],
                    get_type: [
                        { required: true, message: "请输入数据获取方式", trigger: "blur" },
                    ],
                    url: [
                        { required: true, message: "请输入拉取或推送地址", trigger: "blur" },
                    ],
                },
                Generate_vendor: [],//温度计厂家信息
                Pull_url: "",
                disabledtrue: false,
                Alltotal: 0,
                ids: [],
                titlename: "温度计厂商授权",
                statusType: 0,// 0 创建 1 详情 2 编辑
                disableddata:false,
                disabledtype:false
            }
        },
        mounted() {
            // 温度计厂商
            this.Firmoptionspage();
            // 授权列表接口调用
            this.queryListData()
        },
        methods: {
            queryListData() {
                this.Objfirm_Auth_List()
            },
            Objfirm_Auth_List() {
                var param = {
                    ...this.queryList
                }
                firm_Auth_List(param).then((res) => {
                    if (res.code == 10000) {
                        this.tableData = res.data.list
                        this.Alltotal = res.data.total
                        this.queryList.page_size = res.data.page_size
                        this.currentPage4 = res.data.page
                        console.log(this.queryList.page_size)
                    }
                })
            },
            replacement() {
                Object.assign(
                    this.$data.queryList,
                    this.$options.data().queryList
                );
                this.queryListData()
            },
            deletedata() {
                var param = {
                    ids: this.ids.map(Number)
                }
                firm_Auth_delete(param).then((res) => {
                    if (res.code == "10000") {
                        this.messagealert("删除成功", "success")
                        this.queryListData()
                    }
                })
            },
            handleSelectionChange(val) {
                this.ids = val.map((item) => item.id)
                console.log(this.ids, "handleSelectionChange")
            },
            handleSizeChange(val) {
                this.queryList.page_size = val
                this.queryList.page = 1
                this.queryListData()
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.queryList.page = val
                this.queryListData()
                console.log(`当前页: ${val}`);
            },
            found() {
                this.titlename = "创建温度计厂商授权"
                this.drawer = true
                this.disabledtype = false
                this.statusType = 0
            },
            // 温度计厂商
            Firmoptionspage() {
                var param = {};
                Firmoptions(param).then((res) => {
                    if (res.code == "10000") {
                        this.Generate_vendor = res.data.options;
                    }
                });
            },
            changedDate(value) {
                var Generate_datList = this.Generate_vendor.find((itme) => itme.key == value)
                if (Generate_datList != "") {
                    this.ruleForm.firm_alias = Generate_datList.value
                    this.Pull_url = Generate_datList.push_url
                }
            },
            confirm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var param = {
                            ...this.ruleForm,
                            is_enable: this.ruleForm.is_enable == true ? "0" : "1",
                            collect_cycle:this.ruleForm.collect_cycle+""
                        }
                        if (this.statusType == 0) {
                            firm_Auth_create(param).then((res) => {
                                if (res.code == 10000) {
                                    this.messagealert("温度计厂商授权创建成功", 'success')
                                    this.closetabe()
                                    this.queryListData()
                                } else {

                                }
                            })
                        } else if (this.statusType == 2) {
                            firm_Auth_update(param).then((res) => {
                                if (res.code == 10000) {
                                    this.messagealert("温度计厂商授权编辑成功", 'success')
                                    this.closetabe()
                                    this.queryListData()
                                } else {

                                }
                            })
                        }
                       
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            get_typeChange(val) {
                console.log(val, "Pull_urlPull_url")
                if (val == 0) {
                    this.ruleForm.url = ""
                    this.disabledtrue = false
                } else if (val == 1) {
                    this.ruleForm.url = this.Pull_url
                    this.disabledtrue = true
                }
            },
            messagealert(message, type) {
                this.$message({
                    message: message,
                    type: type
                });
            },
            closetabe() {
                this.drawer = false
                Object.assign(
                    this.$data.ruleForm,
                    this.$options.data().ruleForm
                );
            },
            details(value, type) {
                if (type == 1) {
                    this.titlename = "温度计厂商授权详情"
                    this.statusType = 1
                    this.disableddata = true
                } else if (type == 2) {
                    this.titlename = "温度计厂商授权修改"
                    this.statusType = 2
                    this.disableddata = false
                    this.disabledtype = true
                    
                }
                this.drawer = true
                var param = {
                    id: value.id
                }
                firm_Auth_detail(param).then((res) => {
                    if (res.code == 10000) {
                        this.ruleForm = res.data
                        this.ruleForm.is_enable = res.data.is_enable == 0 ? true : false
                        this.ruleForm.firm_id = res.data.firm_id
                         if(res.data.get_type == 1 ) {
                            this.disabledtrue = true
                         }else {
                            this.disabledtrue = false
                         }
                    }
                })
            }
        }
    }
</script>
<style lang="less" scoped>
    /deep/ .el-drawer__body {
        background: #F0F2F5;
    }

    .thermometermanwarry {
        padding: 10px 15px;
        background-color: #fff;

        .thermometer {
            background: white;
        }

        .thermometer_footer {
            display: flex;
            justify-content: flex-end;
            margin: 10px 0px 0px 0px;
        }
    }
</style>